﻿import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.15
import Qt.labs.settings 1.0


// 导入自定义包
import com.mycompany.customType 1.0

SearchForm{
    // 服务设备列表delegate-------------------------------------------------------
    Component {
        id: delegateServerList
        //
        Item {
            id: delegateServerItem
            property int itemShowHeight: columnDevice.height + 2 * columnDevice.spacing
            x: 0
            width: listViewServer.width - x
            height: {
                return itemShowHeight;
            }
            opacity: 1
            smooth: true
            visible: true

            // 背景
            Rectangle {
                x: 2; y: 2;
                width: parent.width - x*2
                height: parent.height - y*2
                color: "ivory"
                border.color: "orange"
                radius: 5
            }
            // 鼠标响应
            MouseArea {
                anchors.fill: parent
                //propagateComposedEvents: true
                acceptedButtons: Qt.LeftButton | Qt.RightButton
                onClicked: {
                    //console.log("onClicked ServerItem:" + index)
                    mouse.accepted = false;
                    listViewServer.currentIndex = index
                    // 强制获取焦点，否则无法使用键盘上下键切换行
                    listViewServer.forceActiveFocus();
                }
            }
            Item {
                //spacing: 10
                anchors.fill: parent
                Column{
                    id: columnDevice
                    spacing: 8
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.leftMargin: 10
                    //anchors.topMargin: 5
                    //anchors.bottomMargin: 5
                    Text {
                        //id: textDeviceName
                        width: parent.width
                        wrapMode: TextArea.WrapAnywhere
                        //topPadding: 2
                        lineHeight: 0.7
                        text: {
                            if(ftpName.length > 0)
                            {
                                return ftpName;
                            }
                            if(serverName.length > 0)
                            {
                                return serverName;
                            }
                            return "未知"
                        }
                        //font.family: customFont.name
                        font.bold: true
                        font.pixelSize: 15
                    }
                    Text {
                        //id: textDeviceAddr
                        width: parent.width
                        wrapMode: TextArea.WrapAnywhere
                        //topPadding: 2
                        lineHeight: 0.7
                        text: {
                            return serverAddr;
                        }
                        anchors.topMargin: 2
                        //font.family: customFont.name
                        //font.bold: true
                        font.pixelSize: 11
                        color: "gray"
                    }
                }
                RoundButton {
                    id: btnServerConnect
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    focus: true
                    visible: true
                    text: {
                        return qsTr("打开");
                    }
                    background: Rectangle {
                        //implicitWidth: delegateServerItem.height
                        //implicitHeight: delegateServerItem.height
                        radius: delegateServerItem.height / 2
                        opacity: enabled ? 1 : 0.3
                        color: btnServerConnect.down ? "#d0d0d0" : "#e0e0e0"
                        border.color: "lightgreen"
                        scale: btnServerConnect.down ? 1.1 : 1.0
                    }
                    onClicked: {
                        //listViewServer.model.openServer(serverAddr);
                        console.log("click on btnServerConnect:" + text + "  index:" + index + "  " + serverName + "   " + serverAddr);
                        console.log('click on btnServerConnect2:' + ftpIP + "  " + ftpPort + "  " + ftpName)
                        dialogEnterFtpUserInfo.setDialogInfo(ftpIP, ftpPort, ftpName);
                        dialogEnterFtpUserInfo.open();
                    }
                }
            }
            // 状态值
            states: [
                /*, State {// 当前选择行为当前
                    name: "Current"
                    when: delegateServerItem.ListView.isCurrentItem
                    PropertyChanges {
                        target: delegateServerItem;
                        x: 20
                    }
                }*/
            ]
            // 属性变化动画效果
            transitions: [
                Transition {
                    PropertyAnimation { property: "height"; duration: 250; }
                }
                /*, Transition {// 没效果，原因未知，使用Behavior有效果
                    //PropertyAnimation { property: "opacity"; duration: 300; }
                }*/
                /*
                , Transition {
                    NumberAnimation { properties: "x,y,contentY,height,width"; duration: 200 }
                }*/
            ]
            Behavior on opacity {
                PropertyAnimation { duration: 250 }
            }

            // 增删动画效果Animate adding and removing of items:
            ListView.onAdd: SequentialAnimation {
                PropertyAction { target: delegateServerItem; property: "height"; value: 0 }
                NumberAnimation { target: delegateServerItem; property: "height"; to: delegateServerItem.height; duration: 250; easing.type: Easing.InOutQuad }
            }
            ListView.onRemove: SequentialAnimation {
                PropertyAction { target: delegateServerItem; property: "ListView.delayRemove"; value: true }
                NumberAnimation { target: delegateServerItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }

                // Make sure delayRemove is set back to false so that the item can be destroyed
                PropertyAction { target: delegateServerItem; property: "ListView.delayRemove"; value: false }
            }
        }
    }

    // 项高亮组件
    Component {
        id: highlightDevice
        Rectangle {
            // parent在列表不显示时会变为null
            // parent.parent是ListView
            x: {
                //console.log('x:' + parent.parent.currentItem.x)
                return parent&&parent.parent.currentItem ? parent.parent.currentItem.x : 0
            }
            y: parent&&parent.parent.currentItem ? parent.parent.currentItem.y : 0
            width: {
                //console.log('**************')
                //console.log(parent)
                //console.log(parent.parent)
                //console.log(parent.parent.currentItem)
                //console.log('width:' + parent.parent.currentItem.width)
                return parent&&parent.parent.currentItem ? parent.parent.currentItem.width : 0
                //return 120
            }
            height: {
                //console.log('height:' + parent.parent.currentItem.height)
                return parent&&parent.parent.currentItem ? parent.parent.currentItem.height : 0
            }
            color: "lightsteelblue"
            border.color: "lightgreen"
            border.width: 4
            radius: 5
            Behavior on y {
                SpringAnimation { spring: 3; damping: 0.3 }
            }
        }
    }

    searchBtn{
        onClicked: {
            listViewServer.model.scanServer(textFieldPort.text);
        }
    }

    // ===========================================================================
    // FTP用户名密码窗口
    Dialog {
        id: dialogEnterFtpUserInfo
        visible: false
        anchors.centerIn: parent
        focus: true
        modal: true
        title: qsTr("输入FTP登陆用户名密码")
        standardButtons: Dialog.NoButton
        property string ftpUserName: ""
        property string ftpUserPassword: ""
        property string ftpIP: ""
        property int ftpPort: 0
        property string ftpName: ""

        Settings {// 保存配置
            property alias dlgFtpUserName: dlgFtpUserNameValue.text
            property alias dlgFtpUserPassword: dlgFtpUserPasswordValue.text
        }

        function setDialogInfo(ftpIP, ftpPort, ftpName)
        {
            //this.ftpUserName = ftpUserName;
            //this.ftpUserPassword = ftpUserPassword;
            this.ftpIP = ftpIP;
            this.ftpPort = ftpPort;
            this.ftpName = ftpName;

            //dlgFtpUserNameValue.text = ftpUserName;
            //dlgFtpUserPasswordValue.text = ftpUserPassword;
        }
        footer: ToolBar {
            position: ToolBar.Footer
            background: Rectangle{
                anchors.fill: parent
                color: "white"
                border.color: "black"
                border.width: 1
                Rectangle{// 边框,绘制被遮盖的dlg边框
                    color: parent.color
                    border.width: 0
                    anchors.fill: parent
                    anchors.topMargin: 0
                    anchors.rightMargin: 1
                    anchors.bottomMargin: 1
                    anchors.leftMargin: 1
                }
            }
            Row {
                anchors.fill: parent
                layoutDirection: Qt.RightToLeft
                spacing: 1
                padding: 1  // 避免遮盖边框

                Button {
                    text: qsTr("取消")
                    onClicked: {
                        dialogEnterFtpUserInfo.reject();
                    }
                }
                Button {
                    text: qsTr("打开FTP")
                    onClicked: {
                        dialogEnterFtpUserInfo.accept();
                    }
                }
                Button {
                    text: qsTr("复制链接")
                    onClicked: {
                        console.log('复制FTP, ftp://' + dlgFtpUserNameValue.text + ':' + dlgFtpUserPasswordValue.text + '@' + dialogEnterFtpUserInfo.ftpIP + ':' + dialogEnterFtpUserInfo.ftpPort + '/')
                        listViewServer.model.ftpAddrToClipboard(dialogEnterFtpUserInfo.ftpIP, dialogEnterFtpUserInfo.ftpPort, dlgFtpUserNameValue.text, dlgFtpUserPasswordValue.text);
                    }
                }
            }
        }
        onAccepted: {
            console.log('打开FTP, ftp://' + dlgFtpUserNameValue.text + ':' + dlgFtpUserPasswordValue.text + '@' + this.ftpIP + ':' + this.ftpPort + '/')
            listViewServer.model.openServer(this.ftpIP, this.ftpPort, dlgFtpUserNameValue.text, dlgFtpUserPasswordValue.text);
        }
        contentItem: Item {
            Column {
                spacing: 3
                TextField {
                    id: dlgFtpUserNameValue
                    focus: true
                    readOnly: false
                    placeholderText: qsTr("FTP用户名")
                }
                TextField {
                    id: dlgFtpUserPasswordValue
                    focus: true
                    readOnly: false
                    echoMode: TextInput.PasswordEchoOnEdit
                    placeholderText: qsTr("FTP密码")
                }
            }
        }
    }
}
